<article class="component" id="layout" data-url='structure'>
  <h2 class="component-title">layout</h2>
  <p class="component-description">The layout of page should be correct. Every page should have a <code>.page</code> container, and put contents in <code>.content</code> container.</p>
  <p>Here is the basic layout of a page:</p>

  <div class="component-example component-example-fullbleed">
  </div>
{% highlight html %}
<!-- page containet -->
<div class="page">
  <!-- titlebar -->
  <header class="bar bar-nav">
    <a class="icon icon-me pull-left open-panel"></a>
    <h1 class="title">Title</h1>
  </header>

  <!-- toolbar -->
  <nav class="bar bar-tab">
    <a class="tab-item active" href="#">
      <span class="icon icon-home"></span>
      <span class="tab-label">Home</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-star"></span>
      <span class="tab-label">Fav</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-settings"></span>
      <span class="tab-label">Settings</span>
    </a>
  </nav>

  <!-- page content -->
  <div class="content">
    <div class="content-block">content here</div>
  </div>
</div>

<!-- popup, panel -->
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
  <div class="content-block">
    <p>Here is a side panel</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">close</a></p>
  </div>
</div>
{% endhighlight %}
<p>Ever page should have a <code>.page</code> container.</p>
</article>
